<template>
  <div class="wrapper">
    <div class="form-container">
      <el-form :model="form" ref="formRef" :rules="formRules" label-position="right" label-width="90">
        <el-form-item label="使用范围" prop="useScope">
          <el-select v-model="form.useScope" placeholder="使用范围">
            <el-option label="攸诺城配" value="1"></el-option>
            <el-option label="攸诺运管" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="agreementType">
          <el-select v-model="form.agreementType" placeholder="服务协议">
            <el-option label="服务协议" value="1"></el-option>
            <el-option label="隐私协议" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用系统" prop="platform">
          <el-select v-model="form.platform" placeholder="请选择操作系统">
            <el-option label="IOS" value="3"></el-option>
            <el-option label="Android" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input placeholder="版本号" v-model="form.version"></el-input>
        </el-form-item>
        <el-form-item label="协议名称" prop="isForceUpdate">
          <el-input v-model="form.title" placeholder="协议名称"></el-input>
        </el-form-item>
        <el-form-item label="协议编号" prop="code">
          <el-input v-model="form.code" placeholder="协议编号"></el-input>
        </el-form-item>
        <el-form-item label="协议详情" prop="content">
          <WangEditor v-model:value="form.content as string" height="200px" />
        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button type="primary" @click="submitForm(formRef as FormInstance)">{{ btnStatus ? "添加" : "修改" }}</el-button>
        <el-button type="primary" @click="router.push('/provinceLevel/proBasic/proAgreement/index')">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup name="proStaffAdd">
import { onMounted, ref } from "vue";
import { Agreement } from "@/api/interface/province/base";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { addProtocolAPI, getProtocolDetailAPI, updateProtocolAPI } from "@/api/modules/province/baseAPI";
import WangEditor from "@/components/WangEditor/index.vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let form = ref<Agreement.AddParams>({});
let btnStatus = ref<boolean>(true);
const formRef = ref<FormInstance>();
const formRules = ref<FormRules>({
  useScope: [{ required: true, message: "请选择使用范围", trigger: "change" }],
  agreementType: [{ required: true, message: "请选择协议类型", trigger: "change" }],
  platform: [{ required: true, message: "请选择适用系统", trigger: "change" }],
  version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
  content: [{ required: true, message: "请输入协议详情", trigger: "blur" }]
});
const submitForm = (formEl: FormInstance) => {
  formEl.validate(valid => {
    if (valid) {
      if (btnStatus.value) {
        addProtocol();
      } else {
        updateProtocol();
      }
    } else {
      ElMessage.error("请填写完整信息");
    }
  });
};
const addProtocol = async () => {
  const { code, msg } = await addProtocolAPI(form.value);
  if (code == "200") {
    ElMessage.success("添加成功");
    router.push({ path: "/provinceLevel/proBasic/proAgreement/index" });
  } else {
    ElMessage.error(msg);
  }
};
const updateProtocol = async () => {
  const { code, msg } = await updateProtocolAPI(form.value);
  if (code == "200") {
    ElMessage.success("修改成功");
    router.push({ path: "/provinceLevel/proBasic/proAgreement/index" });
  } else {
    ElMessage.error(msg);
  }
};
const getProtocolDetail = async () => {
  const { code, data, msg } = await getProtocolDetailAPI(route.query.id as string);
  if (code == "200" && data) {
    form.value = data;
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  if (route.query.id != undefined) {
    console.log(route.query.id);
    btnStatus.value = false;
    // form.value.id = Number(route.query.id as string);
    getProtocolDetail();
  }
});
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 15px;
  font-size: 13px !important;
  background-color: white;
  .form-container {
    width: 60%;
    margin: 0 auto;
    .sms-code {
      //   float: right;
      position: absolute;
      right: 5px;
      display: inline-block;
    }
  }
  .title {
    margin: 15px 0;
    margin-left: 22px;
    font-size: 13px;
    font-weight: 700;
  }
  .radio-container {
    // margin-left: 24px;
    vertical-align: bottom;
    span {
      display: inline-block;
      height: 10px;
      margin-right: 15px;
      margin-left: 24px;
      line-height: 15px;
      vertical-align: middle;
    }
  }
  .table-container {
    margin-left: 20px;
    .table-content {
      display: inline-block;
      width: 65%;
      margin-left: 20px;
    }
  }
}
.btn-container {
  text-align: center;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 700;
  color: #999999;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
